<template>
<onekit-page>
<onekit-view onekit-class="container">
	<div is="onekit-template-head" :DATA="`${JSON.stringify({title:'关键帧动画'})}`"></div>
	<onekit-view onekit-class="page-body">
		<onekit-view onekit-class="page-section">
			<onekit-view onekit-class="page-section-title">
				<onekit-text>关键帧动画\n\n从小程序基础库 2.9.0 开始支持一种更友好的动画创建方式，用于代替旧的 wx.createAnimation</onekit-text>
			</onekit-view>
			<onekit-view :onekit-style="`${containerStyle1}`" id="container1">
				<onekit-button onekit-class="block1" onekit-style="width: 150px; margin: 50px auto;">示例按钮</onekit-button>
				<a onekit-class="block1" onekit-style="display: block; margin: 50px auto; width: 150px; text-align: center;">示例超链接</a>
				<onekit-text onekit-class="block1" onekit-style="display: block; margin: 50px auto; width: 150px; text-align: center;">示例文本</onekit-text>
			</onekit-view>
			<onekit-button :disabled="!canIUse" type="primary" @Tap="change">开启动画</onekit-button>
		</onekit-view>
	</onekit-view>
	<div is="onekit-template-foot"></div>
</onekit-view>
</onekit-page></template>
<script>
/* eslint-disable */
import Vue from 'vue';
import onekit_template_0 from '../../../common/head.head.vue';Vue.component('onekit-template-head',onekit_template_0);
import onekit_template_1 from '../../../common/foot.foot.vue';Vue.component('onekit-template-foot',onekit_template_1);
const ONEKIT_JSON= {
  "navigationBarTitleText": "动画",
  "usingComponents": {
    
  }
};
const ONEKIT_SJS = {
};
import wx from '../../../../weixin2vue/wx.js';
import Macro from '../../../../weixin2vue/Macro.js';
const {getApp,getCurrentPages} = Macro;
import Page from '../../../../weixin2vue/OnekitPage.js';
import Component from '../../../../weixin2vue/OnekitComponent.js';
export default Page(ONEKIT_JSON,["containerStyle1","canIUse"],ONEKIT_SJS,{
    "onShareAppMessage"(){
      return {
        "title":'动画',
        "path":'package/API/pages/animation/animation',
        "containerStyle1":''
};
    },
    "data":{
        "canIUse":true
},
    "onLoad"(){
      const canIUse = this.animate !== undefined;
      if(!canIUse)
      {
        wx.showModal({
            "title":'微信版本过低，暂不支持本功能'
});
        this.setData({
            canIUse
});
      };
    },
    "change"(){
      this.animate('#container1',[
      {
          "opacity":1.0,
          "rotate":0,
          "backgroundColor":'#FF0000'
},
      {
          "opacity":0.5,
          "rotate":45,
          "backgroundColor":'#00FF00',
          "offset":0.9
},
      {
          "opacity":0.0,
          "rotate":90,
          "backgroundColor":'#FF0000'
}
    ],5000,function(){
      this.clearAnimation('#container1',{
        "opacity":true,
        "rotate":true
},function(){
      console.log("清除了#container上的动画属性");
    });
    }.bind(this));
      this.animate('.block1',[
      {
          "scale":[
            1,
            1
          ],
          "rotate":0,
          "ease":'ease-out'
},
      {
          "scale":[
            1.5,
            1.5
          ],
          "rotate":45,
          "ease":'ease-in',
          "offset":0.9
},
      {
          "scale":[
            2,
            2
          ],
          "rotate":90
}
    ],5000,function(){
      this.clearAnimation('.block1',{
        "scale":true,
        "rotate":true
},function(){
      console.log("清除了.block1上的动画属性");
    });
    }.bind(this));
    }
});

</script>
<style 
 lang="css">
.animation-element-wrapper {
  display: flex ;
  width: 100% ;
  padding-top: 75px ;
  padding-bottom: 75px ;
  justify-content: center ;
  overflow: hidden ;
  background-color: #ffffff ;
}
.animation-element {
  width: 100px ;
  height: 100px ;
  background-color: #1AAD19 ;
}
.animation-buttons {
  padding: 15px 25px 5px ;
  width: 100% ;
  height: 330px ;
  box-sizing: border-box ;
}
.animation-button {
  float: left ;
  line-height: 2 ;
  width: 150px ;
  margin: 8px 11px ;
}
.animation-button-reset {
  width: 610px ;
}
.btn-row {
  display: flex ;
  justify-content: space-between ;
}
</style>